Reusable এবং Dynamic Components তৈরি করা

Ember.js একটি শক্তিশালী ফ্রেমওয়ার্ক যা components এর মাধ্যমে UI নির্মাণের জন্য একটি মডুলার এবং পুনঃব্যবহারযোগ্য পদ্ধতি সরবরাহ করে। কম্পোনেন্টগুলি UI উপাদানগুলির মতো কাজ করে, যেখানে আপনি একাধিক জায়গায় ব্যবহার করার জন্য একই কম্পোনেন্ট রেন্ডার করতে পারেন। এর মাধ্যমে অ্যাপ্লিকেশনের কাঠামো আরও পরিষ্কার এবং মডুলার হয়।

এমবারজেএস-এ Reusable (পুনঃব্যবহারযোগ্য) এবং Dynamic (ডাইনামিক) কম্পোনেন্ট তৈরি করার পদ্ধতি এখানে আলোচনা করা হয়েছে।

১. Reusable Component তৈরি করা

Reusable Component এমন একটি কম্পোনেন্ট যা একাধিক জায়গায় বা প্রোজেক্টে ব্যবহার করা যেতে পারে। কম্পোনেন্টকে Dynamic এবং Customizable করতে, আপনি arguments বা properties পাস করতে পারেন, যা কম্পোনেন্টটির behavior কাস্টমাইজ করবে।

Reusable Component Example

এখানে একটি পুনঃব্যবহারযোগ্য কম্পোনেন্ট তৈরি করা হবে যা একটি বাটন রেন্ডার করবে এবং তার ক্লিক ইভেন্ট হ্যান্ডল করবে:

1. Component তৈরি করা:

ember generate component button

এটি app/components/button.js এবং app/templates/components/button.hbs ফাইল তৈরি করবে।

2. button.js (Component Logic)

// app/components/button.js
import Component from '@glimmer/component';

export default class ButtonComponent extends Component {
  // আপনি যেকোনো ডেটা বা লজিক এখানে পরিচালনা করতে পারেন
  get buttonText() {
    return this.args.text || 'Click Me'; // আর্গুমেন্ট 'text' যদি না পায় তবে ডিফল্ট 'Click Me'
  }

  handleClick() {
    alert('Button clicked!');
  }
}

3. button.hbs (Component Template)

<!-- app/templates/components/button.hbs -->
<button {{on "click" this.handleClick}}>{{this.buttonText}}</button>

এখানে buttonText একটি কম্পোনেন্ট প্রপার্টি হিসেবে ব্যবহৃত হচ্ছে, যা args.text থেকে আর্গুমেন্ট হিসেবে আসবে। handleClick() মেথড বাটন ক্লিক হলে একটি অ্যালার্ট দেখাবে।

4. App Template এ কম্পোনেন্ট ব্যবহার:

<!-- app/templates/application.hbs -->
<Button @text="Save" />
<Button @text="Delete" />
<Button />

এখানে, @text="Save" এবং @text="Delete" ব্যবহার করে কম্পোনেন্টকে কাস্টমাইজ করা হয়েছে। তৃতীয় বাটনটি কোন text আর্গুমেন্ট না দেওয়া হলে ডিফল্ট Click Me টেক্সট দেখাবে।

২. Dynamic Component তৈরি করা

Dynamic Components হল এমন কম্পোনেন্ট যা তার উপাদান বা কনটেন্ট runtime এ পরিবর্তিত হয়। Ember.js এর dynamic component ব্যবহারে, আপনি একটি কম্পোনেন্টের মান প্রোগ্রাম্যাটিকভাবে পরিবর্তন করতে পারবেন এবং একই কম্পোনেন্ট বিভিন্ন পরিস্থিতিতে বিভিন্নভাবে রেন্ডার করতে পারবেন।

Dynamic Component Example

এখানে একটি ডাইনামিক কম্পোনেন্ট তৈরি করা হবে যা কম্পোনেন্টের নাম এবং আর্গুমেন্টের ওপর ভিত্তি করে বিভিন্ন কম্পোনেন্ট রেন্ডার করবে।

1. Component তৈরি করা:

ember generate component dynamic-component

এটি app/components/dynamic-component.js এবং app/templates/components/dynamic-component.hbs ফাইল তৈরি করবে।

2. dynamic-component.js (Component Logic)

// app/components/dynamic-component.js
import Component from '@glimmer/component';

export default class DynamicComponent extends Component {
  get componentName() {
    // আর্গুমেন্টের মাধ্যমে নির্ধারণ করা হবে কোন কম্পোনেন্ট রেন্ডার হবে
    return this.args.componentName || 'default-component';
  }
}

এখানে, componentName কম্পোনেন্টটি args.componentName থেকে আর্গুমেন্ট নিয়ে একটি ডাইনামিক কম্পোনেন্ট রেন্ডার করবে। যদি আর্গুমেন্ট না থাকে, তবে ডিফল্টভাবে default-component রেন্ডার হবে।

3. dynamic-component.hbs (Component Template)

<!-- app/templates/components/dynamic-component.hbs -->
{{#if (eq this.componentName 'first-component')}}
  <FirstComponent />
{{else if (eq this.componentName 'second-component')}}
  <SecondComponent />
{{else}}
  <DefaultComponent />
{{/if}}

এখানে, dynamic-component কম্পোনেন্টের আর্গুমেন্টের উপর ভিত্তি করে বিভিন্ন কম্পোনেন্ট রেন্ডার হচ্ছে। eq হেল্পারটি ব্যবহার করে আমরা ডাইনামিকভাবে একটি কম্পোনেন্ট নির্বাচন করছি।

4. App Template এ Dynamic Component ব্যবহার:

<!-- app/templates/application.hbs -->
<DynamicComponent @componentName="first-component" />
<DynamicComponent @componentName="second-component" />
<DynamicComponent @componentName="unknown-component" />

এখানে, আমরা DynamicComponent কম্পোনেন্টে আর্গুমেন্ট হিসেবে @componentName পাস করছি, যার মাধ্যমে প্রতিটি রেন্ডার হবে আলাদা কম্পোনেন্ট।

৩. Dynamic Slot/Content Passing

Ember.js-এ আপনি একটি কম্পোনেন্টের মধ্যে dynamic content পাঠাতে পারেন। এই বৈশিষ্ট্যটি ব্যবহার করে একটি কম্পোনেন্টের টেমপ্লেটের মধ্যে ডাইনামিক কনটেন্ট রেন্ডার করা যায়।

Example: Dynamic Slot Content Passing

1. DynamicSlotComponent তৈরি করা

ember generate component dynamic-slot

2. dynamic-slot.js (Component Logic)

// app/components/dynamic-slot.js
import Component from '@glimmer/component';

export default class DynamicSlotComponent extends Component {}

3. dynamic-slot.hbs (Component Template)

<!-- app/templates/components/dynamic-slot.hbs -->
<div class="dynamic-slot">
  {{yield}} <!-- Yield allows dynamic content to be passed inside -->
</div>

4. Application Template:

<!-- app/templates/application.hbs -->
<DynamicSlot>
  <h2>This is dynamic content inside the slot</h2>
</DynamicSlot>

এখানে, yield ব্যবহার করে আমরা dynamic-slot কম্পোনেন্টের ভিতরে ডাইনামিক কনটেন্ট পাস করেছি।

৪. Reusable এবং Dynamic Component এর উপকারিতা

• Reusable Components: একবার তৈরি করা কম্পোনেন্ট একাধিক জায়গায় পুনঃব্যবহার করা যায়। এতে কোডের পুনঃব্যবহারযোগ্যতা বাড়ে এবং অ্যাপ্লিকেশন দ্রুত ডেভেলপ করা যায়।
• Dynamic Components: ডাইনামিক কম্পোনেন্টের মাধ্যমে, আপনি কম্পোনেন্টের আউটপুট বা behavior runtime এ পরিবর্তন করতে পারেন। এটি UI এর আরও বেশি ইন্টারঅ্যাকটিভ এবং ডাইনামিক পারফর্মেন্স সরবরাহ করে।

Ember.js-এ Reusable এবং Dynamic কম্পোনেন্ট তৈরি করা আপনাকে পুনঃব্যবহারযোগ্য UI উপাদান তৈরি করতে সহায়ক। Reusable Components আপনার কোডের মডুলারিটি বাড়ায় এবং Dynamic Components আপনাকে ডাইনামিকভাবে UI তৈরি করতে সাহায্য করে। এটি অ্যাপ্লিকেশনটির লজিক এবং UI উন্নত করে এবং কোডের পুনঃব্যবহারযোগ্যতা বৃদ্ধি পায়।